﻿<phone:PhoneApplicationPage 
    x:Class="Rachmans.Sabang.NewQuran"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape" Orientation="Portrait" OrientationChanged="PhoneApplicationPage_OrientationChanged"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" Unloaded="PhoneApplicationPage_Unloaded">

    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>
    
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.Resources>
            <Style x:Key="paragraphStyle" TargetType="TextBlock">
                <Setter Property="TextWrapping" Value="Wrap" />
                <Setter Property="FontSize" Value="25"/>
                <Setter Property="FontFamily" Value="/Fonts/me_quran_volt_newmet.ttf#me_quran"></Setter>
                <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
                <Setter Property="FlowDirection" Value="RightToLeft"></Setter>
                <Setter Property="TextAlignment" Value="Justify"></Setter>
                <Setter Property="Foreground" Value="Black"></Setter>
            </Style>
            <Style x:Key="pageStyle" TargetType="TextBlock">
                <Setter Property="TextWrapping" Value="Wrap" />
                <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
                <Setter Property="FlowDirection" Value="RightToLeft"></Setter>
                <Setter Property="TextAlignment" Value="Justify"></Setter>
                <Setter Property="Foreground" Value="Black"></Setter>
            </Style>
            <Style x:Key="headerStyle" TargetType="TextBlock">
                <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"></Setter>
                <Setter Property="Margin" Value="5,5,5,5"></Setter>
                <Setter Property="FontWeight" Value="Bold"></Setter>
                <Setter Property="FontSize" Value="18"></Setter>
                <Setter Property="Height" Value="Auto"></Setter>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid Margin="5,0,5,0" Visibility="Collapsed" Name="grdHeader">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
            <toolkit:ListPicker FlowDirection="LeftToRight" Grid.Column="0" Grid.Row="0" Name="lpSura" Margin="0,-7,1,0" Height="Auto" VerticalContentAlignment="Center"
                                    SelectionChanged="lpSura_SelectionChanged" 
                                    BorderThickness="0" FontWeight="Bold" Background="{StaticResource PhoneAccentBrush}"
                                    ExpansionMode="FullScreenOnly" FontSize="18" Foreground="{StaticResource PhoneForegroundBrush}">
                <toolkit:ListPicker.FullModeItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="16 21 0 20">
                            <TextBlock Text="{Binding}"
                                       Margin="0 0 0 0"
                                       FontSize="30" 
                                       FontFamily="{StaticResource PhoneFontFamilyLight}"/>
                        </StackPanel>
                    </DataTemplate>
                </toolkit:ListPicker.FullModeItemTemplate>
            </toolkit:ListPicker>
            <!-- Grid for Sura Number -->
            <toolkit:ListPicker FlowDirection="RightToLeft" Grid.Column="2" Grid.Row="0" Name="lpJuz" Margin="0,-7,0,0" Height="Auto" VerticalContentAlignment="Center"
                                    SelectionChanged="lpJuz_SelectionChanged" 
                                    BorderThickness="0" FontWeight="Bold" Background="{StaticResource PhoneAccentBrush}"
                                ExpansionMode="FullScreenOnly" FontSize="18" Foreground="{StaticResource PhoneForegroundBrush}">
                <toolkit:ListPicker.FullModeItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="16 21 0 20">
                            <TextBlock Text="{Binding}"
                                       Margin="0 0 0 0"
                                       FontSize="30" 
                                       FontFamily="{StaticResource PhoneFontFamilyLight}"/>
                        </StackPanel>
                    </DataTemplate>
                </toolkit:ListPicker.FullModeItemTemplate>
            </toolkit:ListPicker>
        </Grid>
        <Grid Margin="5,0,5,0" Name="grdDefaultHeader" Background="{StaticResource PhoneAccentBrush}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
            <TextBlock FlowDirection="LeftToRight" Grid.Column="0" Grid.Row="0" Name="tbSura"  Style="{StaticResource headerStyle}"></TextBlock>
            <TextBlock FlowDirection="RightToLeft" Grid.Column="2" Grid.Row="0" Name="tbJuz"  Style="{StaticResource headerStyle}"></TextBlock>
        </Grid>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="5,0,5,0">
            <ScrollViewer BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="1" Name="sv">
                <StackPanel Background="White" ManipulationCompleted="Aya_ManipulationCompleted" ManipulationStarted="Aya_ManipulationStarted">
                    <TextBlock Padding="5" Width="Auto" Style="{StaticResource paragraphStyle}" Name="Aya">
                    </TextBlock>

                </StackPanel>
            </ScrollViewer>
            <Border Visibility="Visible" x:Name="border" Width="400" Height="200" BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="4,4,4,4" Background="{StaticResource PhoneAccentBrush}" RenderTransformOrigin="0.5,0.5" CacheMode="BitmapCache">
                <Border.RenderTransform>
                    <CompositeTransform x:Name="transform"/>
                </Border.RenderTransform>
                <ScrollViewer Grid.Row="1">
                    <StackPanel Margin="12,0,12,0">

                        <!-- 
                    ListPicker does not support its items set directly to a UIElement.
                    You should set items to data and use templates to configure the view.
                    Data can be set like below, by directly setting the Items to a list of strings.
                    The other option is to use databinding.
                -->
                        <toolkit:ListPicker Header="Translation" Name="lpTranslation">
                            <toolkit:ListPicker.FullModeItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal" Margin="16 21 0 20">
                                        <TextBlock Text="{Binding}"
                                       Margin="0 0 0 0"
                                       FontSize="30" 
                                       FontFamily="{StaticResource PhoneFontFamilyLight}"/>
                                    </StackPanel>
                                </DataTemplate>
                            </toolkit:ListPicker.FullModeItemTemplate>
                        </toolkit:ListPicker>
                        <Button Name="btnSave" Click="btnSave_Click">Save</Button>
                    </StackPanel>
                </ScrollViewer>
            </Border>
            <Border Visibility="Visible" x:Name="borderConfirmation" Width="300" Height="150" BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="4,4,4,4" Background="{StaticResource PhoneAccentBrush}" RenderTransformOrigin="0.5,0.5" CacheMode="BitmapCache">
                <Border.RenderTransform>
                    <CompositeTransform x:Name="transformConfirmation"/>
                </Border.RenderTransform>
                <Border.Child>
                    <ScrollViewer Grid.Row="1">
                        <StackPanel Margin="12,0,12,0">
                            <Button Name="btnSaveBookmark" Click="btnSaveBookmark_Click">Save Bookmark</Button>
                            <Button Name="btnShowBookmarks" Click="btnShowBookmarks_Click">Show Bookmarks</Button>
                        </StackPanel>
                    </ScrollViewer>
                </Border.Child>
            </Border>
        </Grid>
        <Grid Grid.Row="2" Visibility="Collapsed" Name="grdSlider">
            <StackPanel>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" VerticalAlignment="Center" FontSize="25" HorizontalAlignment="Right">Go to page: </TextBlock>
                    <TextBox Name="txtPage" Grid.Column="1" Background="{StaticResource PhoneAccentBrush}"></TextBox>
                    <Button  Grid.Column="2" Name="btnJump" Click="btnJump_Click" Background="{StaticResource PhoneAccentBrush}" Foreground="{StaticResource PhoneForegroundBrush}">Go</Button>
                </Grid>
                <Grid>
            <!--<TextBlock Text="1" Grid.Column="0" Name="tbPage" Margin="5,15,5,0" Style="{StaticResource pageStyle}" Foreground="{StaticResource PhoneForegroundBrush}"></TextBlock>-->
            <Slider Grid.Column="0" VerticalAlignment="Bottom" Name="sldPage" 
Foreground="{StaticResource PhoneAccentBrush}" Minimum="1" Maximum="604" FlowDirection="RightToLeft" ValueChanged="pageSlide_ValueChanged"/>
</Grid>
            </StackPanel>
        </Grid>
        <Grid Grid.Row="2" Name="grdPage">
            <TextBlock Text="1" Grid.Column="0" Name="tbPageMin" Margin="5,0,5,0" Style="{StaticResource pageStyle}" Foreground="{StaticResource PhoneForegroundBrush}"></TextBlock>
        </Grid>
    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="False" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/bookmark.png" Text="bookmarks"  Click="ApplicationBarMenuItem_Click"></shell:ApplicationBarIconButton>
            <shell:ApplicationBarIconButton IconUri="/Images/licence.png" Text="licenses" Click="ApplicationBarIconButton_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Images/setting.png" Text="settings" Click="ApplicationBarMenuItem_Click_1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/translate.png" Text="translate" Click="ApplicationBarMenuItem_Click_2"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>
